
  .dobooks {
    &-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
    }
    &-left {
      flex: 1;
      padding: 16px;
      box-sizing: border-box;
      &-img {
        width: 100%;
        height: 180px;
        background: #eee;
        border-radius: 10px;
        @include flex-ja-c;
        img {
          width: 160px;
        }
      }
      &-info {
        width: 100%;
        height: 30px;
        margin-top: 16px;
        position: relative;
        display: flex;
        flex-direction: row;
        &-txt {
          width: 70%;
          height: 30px;
          padding-left: 20px;
          background: #b2bada;
          line-height: 30px;
          border-radius: 30px;
          font-size: 16px;
          color: #000;
          text-align: left;
        }
        &-btn {
          width: 60px;
          height: 30px;
          margin-left: 10px;
          line-height: 30px;
          border-radius: 10px;
          background: #304884;
          color: #fff;
          font-size: 16px;
          &:active {
            opacity: 0.5;
          }
        }
      }
      &-attrs {
        width: 100%;
        margin-top: 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        &-lib {
          width: 50%;
          text-align: left;
          color: #f8f8f8;
          font-size: 12px;
          margin-top: 6px;
          &.hot {
            color: #c19139;
          }
        }
      }
      &-jn {
        width: 100%;
        margin-top: 16px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        &-btn {
          width: 60px;
          height: 30px;
          margin-left: 10px;
          line-height: 30px;
          border-radius: 10px;
          background: #304884;
          color: #fff;
          font-size: 16px;
          transform: translate(-10px, 10px);
          position: relative;
          &:active {
            opacity: 0.5;
          }
          &._hot {
            background: #800e2b;
          }
          &.add {
            position: absolute;
            right: -30px;
            top: 20px;
          }
          &.clear {
            position: absolute;
            right: -30px;
            top: 60px;
          }
          &.audio {
            position: absolute;
            right: -30px;
            top: 100px;
          }
        }
        &-lib {
          width: 60px;
          height: 60px;
          border-radius: 4px;
          border: 1px solid #939590;
          margin-right: 4px;
          margin-bottom: 4px;
          img {
            width: 100%;
            height: 100%;
            &.learning {
              box-shadow: 0 0 20px rgb(3, 211, 90);
            }
          }
        }
      }
    }
    &-right {
      flex: 1;
      padding: 16px;
      &-learn {
        width: 100%;
        display: flex;
        // height: 140px;
        background: #0d1b26;
        border-radius: 20px;
        border: 1px solid #f8f8f8;
        padding: 16px;
        &-shoujue {
          width: 80px;
          height: 80px;
          background: #b4bbe0;
          border-radius: 10px;
          img {
            width: 100%;
          }
        }
        &-btn {
          flex: 1;
          margin-left: 10px;
          &-txt {
            color: #b4bbe0;
            font-size: 16px;
            text-align: left;
          }
          &-b {
            width: 80px;
            height: 30px;
            font-size: 16px;
            border-radius: 6px;
            margin-top: 10px;
            background: #800e2b;
            color: #fff;
            @include flex-ja-c;
            &:active {
              opacity: 0.5;
            }
          }
        }
      }
      &-bags {
        width: 100%;
        height: 320px;
        overflow: auto;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #b4bbe0;
        border-radius: 10px;
        &-lib {
          width: 25%;
          height: 80px;
          position: relative;
          @include flex-ja-c;
          flex-direction: column;
  
          img {
            width: 70%;
          }
          &-des {
            font-size: 12px;
            margin-top: 4px;
          }
          &::before {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            background: #333;
            transform: scaleX(0.5);
            position: absolute;
            right: 0;
            top: 0;
          }
          &::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: #333;
            transform: scaleY(0.5);
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
      &-des {
        color: #eef217;
        font-size: 18px;
        text-align: left;
        margin-top: 10px;
      }
    }
  }